/**
 * create by young (young2f@outlook.com) on 2020/9/16
 */


'use strict';
import React from 'react';
import {Button, Form, notification, Popconfirm, Table} from 'antd';

import {FormLayout, ModalFooter, ModalView} from 'antd-extra';
import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';

import ViewTitle from "../../../components/ViewTitle";
import styles from "../../index.less";
import ModalCreateOrEdit2 from "../../dic/modal/ModalCreateOrEdit2";
import UploadPic from "../../../components/UploadPic";

moment.locale('zh-cn');

@Form.create()
@connect(({
            tenant,
            global,
            dynamicLabel,
            dic
          }) => ({...tenant, ...dic, ...dynamicLabel, ...global}))
export default class ModalCreateOrEditExperiment extends FormBase {
  constructor(props) {
    super(props);
    const {record} = this.props;
    this.state = record ? {...record} : {};

  }

  componentDidMount() {
    const {table, record = {}} = this.props;
    const {code} = record;
    this.props.dispatch({
      type: 'global/getModel',
      payload: {table}
    });

    code && this.props.dispatch({
      type: 'global/findPicMany',
      payload: {table, tableCode: code}
    });

  }

  renderFoot = () => {
    const {foot, value, callback, modalRef, record, form} = this.props;

    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            form.validateFields((err, values) => {
              if (err) {
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }

              _.map(this.state, (item, key) => {
                values[key] = item;
              });
              values.code = record ? record.code : new Date().valueOf();

              callback(values);
              modalRef.close();
            });

          }}>确定</Button>
          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };
  onEdit = (title, key, cols, record) => {
    ModalView.open(ModalCreateOrEdit2,
      {
        title,
        width: '1080px'
      }, {
        record, cols,
        callback: (payload) => {
          if (!this.state[key]) {
            this.state[key] = [];
          }
          if (record) {
            this.state[key].forEach((item, index) => {
              if (item._code === record._code) {
                this.state[key][index] = payload;
              }
            });
          } else {
            this.state[key].push(payload);
          }

          this.componentDidMount();
        }
      });
  };


  getTable = () => {
    const {table} = this.props;
    const model = this.props[`${table}Model`];
    const temp = [];
    _.map(model, (item, key) => {
      const {type, title, cols} = item;
      _.map(cols, item => {
        item.dataIndex = item.key;
      });

      const _cols = _.cloneDeep(cols);
      const {_type = type} = item;
      if (_type === "array") {
        _cols.push(
          {
            title: "操作", key: "opt", dataIndex: "opt", fixed: 'right', width: 120, render: (value, record) => {
              return (<span>
                      {
                        <a style={{marginRight: '6px'}} disabled={record.reviewStatus === '同意'}
                           onClick={() => this.onEdit(title, key, cols, record)}>编辑</a>
                      }
                {<Popconfirm
                  title="确认删除"
                  onConfirm={() => {
                    _.remove(this.state[key], (item) => item._code === record._code);
                    this.componentDidMount();
                  }}
                  okText="是"
                  cancelText="否"
                >
                  <a style={{marginRight: '6px'}} disabled={record.reviewStatus === '同意'}>删除</a>
                </Popconfirm>}
          </span>);
            }
          }
        );
        temp.push(<div>
            <ViewTitle
              title={title}
              actions={<Button type="primary" onClick={() => {
                this.onEdit(title, key, cols);
              }}>添加</Button>}
            ></ViewTitle>
            <Table
              className={styles.antTable}
              bordered={true}
              columns={_cols}
              dataSource={this.state[key]}
              scroll={{x: true}}
              pagination={true}
              //  scroll={{x: 1300}}
            ></Table>
          </div>
        );
      }

    });
    return temp;
  };

  render() {
    const {form, table, record = {}, pics = []} = this.props;
    const {code}=record;

    const model = this.props[`${table}Model`];
    // const {aFileList, bFileList, cFileList, sFileList} = record;
    _.map(model, (item, key) => {
      item.key = key;
    });
    // const ta = _.find(pics, item => {
    //   return item.label === 'a';
    // });
    // const aFileList = ta ? ta.fileList : [];
    // console.log('aFileList', aFileList);
    // const tb = _.find(pics, item => {
    //   return item.label === 'b';
    // });
    // const bFileList = tb ? tb.fileList : [];
    // const tc = _.find(pics, item => {
    //   return item.label === 'c';
    // });
    // const cFileList = tc ? tc.fileList : [];
    // const ts = _.find(pics, item => {
    //   return item.label === 's';
    // });
    // const sFileList = ts ? ts.fileList : [];
    return (
      <div>
        <FormLayout form={form} cols={2}>
          {this.getDicFields(model, record, this.state)}
        </FormLayout>
        {this.getTable()}
        {
          <UploadPic
            title={'A药剂图片(2张)'}
            dispatch={this.props.dispatch}
            code={code}
            table={table}
            label={"a"}
           // fileList={aFileList}
            callback={data => {
              this.state['aFileList'] = data.fileList;
            }}
          ></UploadPic>
        }
        {
          <UploadPic
            title={'B药剂图片(2张)'}
            label={"b"}
            dispatch={this.props.dispatch}
            code={code}
            table={table}
          //  fileList={bFileList}
            callback={data => {
              this.state['bFileList'] = data.fileList;

            }}
          ></UploadPic>
        }
        {
          <UploadPic
            title={'C药剂图片(2张)'}
            label={"c"}
            dispatch={this.props.dispatch}
            code={code}
            table={table}
           // fileList={cFileList}
            callback={data => {
              this.state['cFileList'] = data.fileList;
            }}
          ></UploadPic>
        }
        {
          <UploadPic
            title={'原水样图片(2张)'}
            label={"s"}
            dispatch={this.props.dispatch}
            code={code}
            table={table}
           // fileList={sFileList}
            callback={data => {
              this.state['sFileList'] = data.fileList;
            }}
          ></UploadPic>
        }

        {this.renderFoot()}
      </div>
    );
  }
}

